

// import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import React, { Component, PureComponent, Suspense, lazy } from 'react'
import ReactDOM from 'react-dom';
import { ZoomInOutlined, ZoomOutOutlined, CloseOutlined, RotateLeftOutlined, RotateRightOutlined } from '@ant-design/icons'
import './imageModal.less'

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';


class Test extends PureComponent {

  boxRef = React.createRef()
  imgRef = React.createRef()
  imgWrapRef = React.createRef()

  state = {
    transformDeg: 0,
    visible: true,
    scaling: 1,
    imgWrapTransform: 'translate3d(0px, 0px, 0px)'
  }

  boxDOM = null

  componentDidMount() {
    this.boxDOM = ReactDOM.findDOMNode(this.boxRef.current);
    this.initImgMoveEvent()
  }

  componentWillUnmount(){
    const dom = this.imgRef.current
    dom && (dom.onmousedown = null)
    dom && (dom.onmouseup = null)
  }

  initImgMoveEvent = () => {
    const dom = this.imgRef.current
    const domWrap = this.imgWrapRef.current

    dom.onmousedown = (e) => {
      e.preventDefault()      // 去掉 图片的 默认 拖动 效果
      dom.style.cursor = 'grabbing'
      domWrap.style.transition = ''
      const {x:cx, y:cy} = e

      const { style } = domWrap
      document.onmousemove = ({ x, y }) => {
        style.transform = `translate3d(${x - cx}px, ${y - cy}px, 0px)`
      }
    }
    document.onmouseup = () => {
      document.onmousemove = null
      domWrap.style.transition = 'transform .3s cubic-bezier(.215,.61,.355,1) 0s'
      dom.style.cursor = 'grab'
      domWrap.style.transform = `translate3d(0px, 0px, 0px)`
    }
  }

  rotate = (type) => {
    let { transformDeg } = this.state
    if (type === 'left') transformDeg -= 90
    if (type === 'right') transformDeg += 90
    this.setState({ transformDeg })
  }

  scallAdd = (num) => {
    let { scaling } = this.state
    scaling += num
    scaling === 0 && (scaling = 1)
    this.setState({ scaling })
  }

  render(){
    const { visible, transformDeg = 0, scaling = 1, imgWrapTransform } = this.state
    let { src } = this.props
    src = `${src}?Authorization=${$g.getToken()}`
    return (
      <>
        {
          <ReactCSSTransitionGroup
            transitionName="example"
            transitionEnterTimeout={150}
            transitionLeaveTimeout={150}
            transitionAppear={true}
            transitionAppearTimeout={150}>
             {
              visible &&
              <div className="test-wrap-root" ref={this.boxRef} key="side-bar">
                <div className="test-wrap-mask"></div>
                <div className="test-wrap-preview-wrap">
                  <div className="test-wrap-preview-content">
                    <ul className="preview-img-operations">
                      <li>
                        <CloseOutlined onClick={() => { this.setState({ visible: false})}}/>
                      </li>
                      <li>
                        <ZoomInOutlined onClick={() => { this.scallAdd(1) }}/>
                      </li>
                      <li>
                        <ZoomOutOutlined
                          onClick={() => { this.scallAdd(-1) }}
                          style={scaling === 1 ? { cursor: 'not-allowed'} : {} }/>
                      </li>
                      <li>
                        <RotateRightOutlined onClick={() => { this.rotate('right') }}/>
                      </li>
                      <li>
                        <RotateLeftOutlined onClick={() => { this.rotate('left') }}/>
                      </li>
                    </ul>
                    <div ref={this.imgWrapRef} className="preview-img-wrapper">
                      <img
                        ref={this.imgRef}
                        className="image-preview-img"
                        src={src}
                        alt=""
                        style={{ transform: `scale3d(${scaling}, ${scaling}, 1) rotate(${transformDeg}deg)`}}/>
                    </div>
                  </div>
                </div>
              </div>
            }
          </ReactCSSTransitionGroup>
        }
      </>
    )
  }

}

export default Test